<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="业务分类" prop="businessTypeName">
            <el-input size="small" v-model="queryParams.businessTypeName" clearable v-on:click.native="isDialog"
                      placeholder="请选择父级流程"
                      @clear="clearInput()"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程名称" prop="processName">
            <el-input
              size="small"
              v-model="queryParams.processName"
              placeholder="请输入流程名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-form-item>
            <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="30">
      <el-table :data="modelList" border ref="multipleTable"
                @selection-change="handleSelectionChange" :row-key="getRowKeys"
      >
        <el-table-column type="selection" :reserve-selection="true"></el-table-column>
        <el-table-column prop="number" label="序号"></el-table-column>
        <el-table-column prop="processName" label="流程名称"></el-table-column>
        <el-table-column prop="processNo" label="流程编号"></el-table-column>
      </el-table>
      <div class="text-center mar-top-20">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-row>

    <!--关联业务分类-->
    <el-dialog title="业务分类" :visible.sync="correlationBaseOpen" append-to-body width="600px">
      <choose-business @checkData="checkData"></choose-business>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="processSubmitForm">确 定</el-button>
        <el-button size="small" @click="processCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import chooseBusiness from '@/plugins/package/tree/chooseBusiness'
import { listModel } from '@/api/workflow/model'

export default {
  name: 'complianceTreeTable',
  components: {
    chooseBusiness
  },
  data() {
    return {
      // 表格数据
      modelList: [],
      total: 0,
      totalPage: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        businessTypeName: null,
        businessTypeId: '',
        processName: null
      },
      correlationBaseOpen: false,
      //记录每行的key值
      getRowKeys(row) {
        return row.processId
      },
      multipleSelection: [], // 表格选中
      select_number: '', //表格select选中的条数
      select_Id: [], //表格select复选框选中的id
      checkDataValue: {}
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    /** 查询合规风险提示库列表 */
    getList() {
      this.loading = true
      listModel(this.queryParams).then(response => {
        this.modelList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows
      this.select_number = this.multipleSelection.length
      this.select_Id = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.select_Id.push(row.id)
          }
        })
      }
      this.$emit('checkData', this.multipleSelection)
    },
    // 弹出显示
    isDialog() {
      this.correlationBaseOpen = true
    },
    /**
     * 清空
     */
    clearInput() {
      this.queryParams.businessTypeName = ''
      this.queryParams.businessTypeId = ''
    },
    /**
     * 主办部门选择-确定
     */
    processSubmitForm() {
      console.log('checkDataValue', this.checkDataValue)
      this.queryParams.businessTypeName = this.checkDataValue.label
      this.queryParams.businessTypeId = this.checkDataValue.id
      this.correlationBaseOpen = false
    },
    /**
     * 主办部门选择-取消
     */
    processCancel() {
      this.correlationBaseOpen = false
    },
    // 子页面回传参数
    checkData(data) {
      this.checkDataValue = data
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
  }
}
</script>

<style scoped>

</style>
